<template>
  <view>
    <nav-bar title="计划详情"></nav-bar>
    <view class="plan-detail">
      <you-detail
        :title="planDetailData.title"
        :detailConfig="planDetailConfig"
        :detailForm="planDetailData"
      >
        <template slot="titleRight">
          <view class="status">
            <view class="arrow"></view>
            <view class="text" :style="{ background: statusConfig[planDetailData.planState || 'default'].bgColor }">
              {{ statusConfig[planDetailData.planState || 'default'].text }}
            </view>
          </view>
        </template>
        <template slot="videos">
          <view style="margin: 0 -30rpx;">
            <you-tabs
              :activeName="tabActive"
              :tabsList="tabsList"
              @tabClick="clickTabItem"
            ></you-tabs>
          </view>
          <view
            class="common-no-data"
            v-if="!videoList || videoList.length === 0"
          >
            <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
            <view class="text">暂无课程~</view>
          </view>
          <view
            v-for="(item, index) in videoList" 
            :key="index"
          >
            <view class="content-box">
              <view class="left-box" @click.stop>
                <video
                  :id="'videoId'+ index"
                  style="width: 100%; height: 100%"
                  class="video"
                  :src="item.videoUrl"
                ></video>    
              </view>
              <view class="right-box">
                <view class="name">{{ item.title }}</view>
              </view>
            </view>
          </view>
          <!-- <view class="video-box">
            <view class="video-item" v-for="(item, index) in planDetailData.videos" :key="index">
              <video class="video" :src="item.videoUrl"></video>
            </view>
          </view> -->
        </template>
      </you-detail>
    </view>
    <you-bottom-btn
      v-if="planDetailData.planState === 2"
      :btnConfig="bottomBtnConfig"
      @clickToAssess="clickToAssess"
    ></you-bottom-btn>
  </view>
</template>

<script>
  import { PLAN_DETAIL } from '../formConfig/planConfig'
  import api_common from '@/api/common'
  import { baseIconUrl } from '@/config'
  export default {
    name: 'PlanDetail',
    data() {
      return {
        baseIconUrl,
        safeHeight: '',
        detailHeight: '',
        planId: '',
        patientName: '',
        planDetailConfig: [],
        planDetailData: {},
        statusConfig: {
          1: { text: '进行中', bgColor: '#ffb958' },
          2: { text: '已反馈', bgColor: '#41BF67' },
          3: { text: '已完成', bgColor: '#41BF67' },
          'default': { text: '待开始', bgColor: '#999999' }
        },
        bottomBtnConfig: [
          { text: '去评估', class: 'confirm', funcName: 'clickToAssess' }
        ],
        tabActive: 1,
        tabsList: [
          { label: "灵活性拉伸", name: 1 },
          { label: "强化肌肉核心", name: 2 },
          { label: "ADL姿势改善", name: 3 },
          { label: "侧弯矫正训练", name: 4 },
        ],
        videoList: []
      }
    },
    onLoad(options) {
      this.planId = options.id
      this.patientName = options.patientName
      this.safeHeight = this.$store.getters.heightData.safeHeight
      this.planDetailConfig = uni.$u.deepClone(PLAN_DETAIL)
      this.getPlanDetail()
    },
    methods: {
      clickTabItem(value) {
        this.tabActive = value
        this.videoList = this.allVideoList.filter(item => item.videoClass === this.tabActive)
      },
      getPlanDetail() {
        const params = {
          id: this.planId
        }
        api_common.fetchPlanDetail(params).then(res => {
          if (res.code !== 200) return
          const result = res.data
          this.planDetailData = {
            ...result,
            patientName: this.patientName,
            date: result.startDate + '至' + result.endDate
          }
          this.allVideoList = result.videos || []
          this.videoList = this.allVideoList.filter(item => item.videoClass === this.tabActive)
          if (this.planDetailData.planState === 2) {
            this.detailHeight = this.$store.getters.heightData.noTabMainHeight - 85 + 'px'
          } else {
            this.detailHeight = this.$store.getters.heightData.noTabMainHeight - 10 + 'px'
          }
        })
      },
      clickToAssess() {
        uni.navigateTo({
          url: '/subPages/physicianTrainPlan/plan/assessReport'
        })
      }
    }
  }
</script>
<style lang="scss">
  .plan-detail {
    margin: 30rpx 30rpx 0;
    border-radius: 16rpx;
    background-color: #FFF;
  }
  .status {
    display: flex;
    align-items: center;
    .text {
      display: flex;
      align-items: center;
      height: 40rpx;
      padding: 0 30rpx 0 40rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #FFF;
    }
    .arrow {
      margin-right: -14rpx;
      border: 14rpx solid #FFF;
      transform: rotate(45deg);
    }
  }
  .video-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -16rpx;
    .video-item {
      width: 150rpx;
      height: 150rpx;
      border-radius: 16rpx;
      margin: 0 16rpx 30rpx;
      .video {
        width: 150rpx;
        height: 150rpx;
        border-radius: 16rpx;
      }
    }
  }
  .content-box {
    display: flex;
    margin: 20rpx 0;
    border: 4rpx solid #FFF;
    border-radius: 16rpx;
    background-color: #FFF;
    .left-box {
      position: relative;
      width: 288rpx;
      height: 192rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      video::-webkit-media-controls-play-button {
        display: none;
      }
    }
    .right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16rpx 0;
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
</style>
